<template>
  <div>
    <div class="flrc padb3">
      色值：{{color}}
      <span style="width: 15px;height: 15px;border:1px solid #ccc;display: inline-block" class="marr10 marl1" :style="'background-color: ' + color + ';'"></span>
      <div class="flex1"></div>
    </div>
    <div><compact-picker v-model="obj" @input="setColor"></compact-picker></div>
  </div>
</template>

<script>
import {Compact} from 'vue-color'
export default {
  name: "pic",
  components:{
    CompactPicker:Compact
  },
  props: {
    name: '',
    value: ''
  },
  data () {
    return {
      color: "",
      obj:{
        hex:"#333333"
      }
    }
  },
  mounted () {
    this.color = this.value
    this.obj.hex = this.value
  },
  methods: {
    setColor(v1,v2) {
      console.log(v1)
      console.log(v2)
      this.$emit("input",v1.hex)
      // this.value = this.obj.hex
    }
  },
  watch:{
    value(val){
      this.color = val
    }

  }
}
</script>

<style scoped>

</style>
